<template>
    <view class="text-center pt-100px box-border loginClass">
        <image
            src="../../static/image/logo.png"
            class="w-200px h-180px"
            mode=""
        />
        <view class="text-24px title">若依管理系统</view>
        <view class="b-rd-45px px-50px m-auto mt-50px">
            <view class="h-60px f-c px-10px">
                <image
                    src="../../static/image/account.png"
                    class="w-22px h-24px"
                    mode=""
                />
                <input
                    v-model="username"
                    type="text"
                    class="text-left ml-30px"
                    placeholder="请输入登录账号"
                />
            </view>
            <view class="h-1px bg-hex-e6e6e6"></view>
            <view class="h-60px f-c px-10px">
                <image
                    src="../../static/image/password.png"
                    class="w-22px h-24px"
                    mode=""
                />
                <input
                    v-model="password"
                    type="password"
                    class="text-left ml-30px"
                    placeholder="请输入密码 (6-14位)"
                />
            </view>
            <view class="h-1px bg-hex-e6e6e6"></view>
            <button
                class="bg-hex-E81123 text-white m-auto mt-60px b-rd-12px text-16px h-36px f-c-c"
                hover-class="button-active"
                @click="handleLogin"
            >
                登录
            </button>
        </view>
    </view>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { getCodeImg, setIogin, getInfo } from '@/api/login.js'
export default defineComponent({
    props: {},
    setup(props, { emit }) {
        const state = reactive({
            username: '',
            password: '',
            uuid: '',
        })
        const methods = {
            /* 登录 */
            handleLogin() {
                if (!state.username)
                    return uni.showToast({
                        title: '请输入登录账号!',
                        icon: 'none',
                    })
                if (!state.password)
                    return uni.showToast({
                        title: '请输入登录密码!',
                        icon: 'none',
                    })
                let form = {
                    username: state.username,
                    password: state.password,
                    uuid: state.uuid,
                }
                setIogin(form).then((res) => {
                    if (res.code == 200) {
                        uni.setStorageSync('token', res.token)
                        apis.getInfoFn().then((res) => {
                            if (res.code == 200) {
                                uni.setStorageSync(
                                    'userInfo',
                                    JSON.stringify(res.user)
                                )
                                uni.switchTab({ url: '/pages/main/main' })
                            }
                        })
                    }
                })
            },
        }
        const apis = {
            /* 获取uuid */
            getCodeUuid() {
                getCodeImg().then((res) => {
                    if (res.code == 200) {
                        state.uuid == res.uuid
                    }
                })
            },
            /* 获取个人信息 */
            getInfoFn() {
                return new Promise((resolve, reject) => {
                    getInfo().then((res) => {
                        resolve(res)
                    })
                })
            },
        }
        const computeds = {}
        onMounted(() => {
            apis.getCodeUuid()
        })
        return {
            ...apis,
            ...toRefs(state),
            ...methods,
            ...computeds,
        }
    },
})
</script>

<style lang="less" scoped>
.loginClass {
    background: url('../../static/image/loginBg.png') no-repeat left top;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    .title {
        letter-spacing: 3px;
        font-weight: 600;
    }
}
</style>
